<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>垂直手风琴</title>
    <!-- 事先引入好的字体图标库 源码会放在简介 自行下载即可 -->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="index.css"/>
</head>
<body>
    <ul class="accordion">
        <li>
            <!-- 单选框的id属性值和label 元素的for属性值相同时,就可以通过label
            元素来选中单选框, 每个单选框都有一个相同name属性 -->
            <!-- 这个属性主要作用是用来将单选框分类的,当每个name属性值相同时,那么这一组单选框就只能同时选中一个 -->
            <input type="radio" name="item" id="item1"/>
            <label for="item1">
                一级标题1
                <i class="fa fa-caret-right"></i>
            </label>
            <ol>
                <li>二级标题1</li>
                <li>二级标题2</li>
            </ol>
        </li>
        <li>
            <input type="radio" name="item" id="item2"/>
            <label for="item2">
                一级标题2
                <i class="fa fa-caret-right"></i>
            </label>
            <ol>
                <li>二级标题1</li>
                <li>二级标题2</li>
                <li>二级标题3</li>
            </ol>
        </li>
        <li>
            <input type="radio" name="item" id="item3"/>
            <label for="item3">
                一级标题3
                <i class="fa fa-caret-right"></i>
            </label>
            <ol>
                <li>二级标题1</li>
                <li>二级标题2</li>
                <li>二级标题3</li>
                <li>二级标题4</li>
            </ol>
        </li>
        <li>
            <input type="radio" name="item" id="item4"/>
            <label for="item4">
                一级标题4
                <i class="fa fa-caret-right"></i>
            </label>
            <ol>
                <li>二级标题1</li>
                <li>二级标题2</li>
                <li>二级标题3</li>
                <li>二级标题4</li>
            </ol>
        </li>
    </ul>
</body>
</html>
